import React, { useEffect, useState } from 'react';
import { Form, Input, Modal, Select } from 'antd';
import { useDispatch, useMappedState } from 'redux-react-hook';

import { PublicState } from '@@/store/reducers';
import {
  ac_update_user,
  ac_set_update_user
} from '@@/store/actions';
import {
  checkMobilePhone
} from '@@/utils/validators';

const layout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 16 },
};

const AddForm = (props: any) => {
  const updateUser = useMappedState((state: PublicState) => state.updateUser)
  const [form] = Form.useForm();
  const dispatch = useDispatch();

  form.setFieldsValue(updateUser);

  /* --=====================功能函数=====================-- */
  // 收起弹窗
  const hideModal = () => {
    props.setIsModalVisible(false);
  }

  /* --=====================事件处理=====================-- */
  // 处话框确定处理
  const handleModalOkClick = async () => {
    try {
      const formData = await form.validateFields();
      dispatch(ac_update_user(formData, dispatch, hideModal));
    } catch (e) {}
  }

  // 对话框取消处理
  const handleModalConcelClick = () => {
    hideModal();
  }

  return (
    <Modal visible={props.visible} onOk={handleModalOkClick} onCancel={handleModalConcelClick} >
      <Form
        {...layout}
        name="basic"
        form={form}
        initialValues={updateUser}
      >
        <Form.Item
          label="用户姓名"
          name="userName"
          rules={[{ required: true, message: '请输入用户名称' }]}
        >
          <Input placeholder="请输入用户名称" maxLength={50} />
        </Form.Item>
        <Form.Item
          label="手机号"
          name="userTel"
          rules={[{ validator: checkMobilePhone }]}
        >
          <Input placeholder="请输入手机号码" maxLength={11} />
        </Form.Item>
        <Form.Item
          label="用户类型"
          name="userType"
          rules={[{ required: true, message: '请选择用户类型' }]}
        >
          <Select placeholder="请选择用户类型">
            <Select.Option key="1" value='1'>管理员</Select.Option>
            <Select.Option key="2" value='2'>子管理员</Select.Option>
            <Select.Option key="3" value='3'>普通用户</Select.Option>
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default AddForm;